<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- <link rel="stylesheet" href="iconfont/iconfont.css"> -->
    <title></title>
    <style>

        #video {
            width: 700px;
            height: 450px;
            margin: 0 auto;
            border: 1px solid silver;
        }
        #mp4par {
            position: relative;
            width: 700px;
            height: 450px;
            background-color: black;
            float: left;
            overflow: hidden;
        }
        #mp4 {
            position: relative;
            width: 700px;
            height: 450px;
        }
        #controls {
            position: absolute;
            width: 700px;
            height: 75px;
            bottom: -75px;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.31);
            text-align: center;
            transition: all 0.3s ease-in;
        }
        #mp4par:hover #controls{
            bottom: 0;
        }
        #btntime {
            width: 700px;
            outline: none;
        }
        #btnsound {
            position: relative;
            top: 5px;
        }
        button {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            outline: none;
            border-style: none;
            background: radial-gradient(#ffae9f, #ff2f39);
            margin: 0 17px;
            color: #474747;
        }
        .iconfont {
            font-size: 24px;
            color: #474747;
        }
    </style>
</head>
<body>
<div id="video">
    <div id="mp4par">
        <video id="mp4" src="./产权交易公示公告发布.mp4
        "></video>
        <div id="controls">
            <input type="range" id="btntime" value="0" max="100"><br>
            <button id="btnstart" style="top: -4px">播放</button>
            <button id="btngo"><i class="iconfont">&#xe6ca;</i></button>
            <button id="btnback"><i class="iconfont">&#xe6cc;</i></button>
            <button id="btnmute"><i class="iconfont">&#xe6cb;</i></button>
            <input type="range" id="btnsound" value="0" max="100">
            <button id="btnbig"><i class="iconfont">&#xe632;</i></button>
            <button><i class="iconfont">&#xe638;</i></button>
        </div>
    </div>
</div>
<script>
    var video = document.getElementById("mp4");
    var btnstart = document.getElementById("btnstart");
    var btntime = document.getElementById("btntime");
    var btngo = document.getElementById("btngo");
    var btnback = document.getElementById("btnback");
    var btnmute=document.getElementById("btnmute");
    var btnsound=document.getElementById("btnsound");
    var btnbig=document.getElementById("btnbig");
    var time;

    //视频开始回放时执行
    video.onplaying = function () {
        //获取当前video的总时间
        var allTime = this.duration;
        btntime.setAttribute("max", allTime);
    };
    //视频播放位置发生变化时开始执行
    video.ontimeupdate = function () {
        btntime.value = this.currentTime;
    };
    //播放进度条的事件
    btntime.addEventListener("mousedown", function () {
        video.pause();
        this.onmousemove = function () {
            video.currentTime = this.value;
        };
        this.onmouseup = function () {
            video.play();
            this.onmousemove = null;
            this.onmouseup = null;
        }
    });
    //快进的点击事件
    btngo.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime += 5;
        }, 1000);
    });
    //快退的点击事件
    btnback.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime -= 2;
            if (video.currentTime <= 0) {
                video.play();
                clearInterval(time);
            }
        }, 1000);
    });
    //静音的点击事件
    btnmute.addEventListener("click",function(){
        video.muted=!video.muted;
    });
    //音量进度条的事件
    btnsound.addEventListener("mousedown",function(){
        this.onmousemove=function(){
            video.volume=this.value/100;
        }
        this.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    });
    //全屏的点击事件
    btnbig.addEventListener("click",function(){
        if (video.webkitRequestFullScreen) {
            video.webkitRequestFullScreen();
        }
        else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        }
        else if (video.msRequestFullScreen) {
            video.msRequestFullScreen();
        }
        else if (video.RequestFullScreen) {
            video.RequestFullScreen();
        }
    });
    //播放的点击事件
    btnstart.addEventListener("click", function () {
        if (this.innerHTML == "播放") {
            video.play();
            this.innerHTML = "暂停";
            clearInterval(time);
        }
        else {
            video.pause();
            this.innerHTML = "播放";
        }
    })
</script>
</body>
</html>